<template>
    <div class="t100">
        <div class="content-title">
            <el-breadcrumb separator="/" v-if="true">
                <el-breadcrumb-item :to="{ path: '/userManagement' }">学校管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/userManagement/openUp' }">开通学校</el-breadcrumb-item>
            </el-breadcrumb>
            开通学校
        </div>

        <div class="content-body">
            <div>
                <div class="content-cont">
                    <el-form ref="form" v-model="form" label-width="100px">
                        <!-- <el-form-item label="学校规模：">
                            <el-select v-model="form.schoolSize" placeholder="请选择学校规模">
                                <el-option label="小" value="1"></el-option>
                                <el-option label="中" value="2"></el-option>
                                <el-option label="大" value="3"></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="开通功能：">
                            <el-checkbox-group v-model="form.type">
                                <el-checkbox label="选课" name="type" value="选课" disabled></el-checkbox>
                                <el-checkbox label="分班" name="type" value="分班" disabled></el-checkbox>
                                <el-checkbox label="排课" name="type" value="排课" disabled></el-checkbox>
                                <el-checkbox label="考勤" name="type" value="考勤" disabled></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>

                        <el-form-item label="选择地址：">
                            <el-select  v-model="form.provinceIndex" placeholder="请选择省份" class="province" @change="changeProvince">
                                <el-option v-for="(item, index) in provinceList" :key="index" :label="item.provinceName" :value="index"></el-option>
                            </el-select>
                            <el-select  v-model="form.cityIndex" placeholder="请选择活动区域" class="province" @change="changeCity">
                                <el-option v-for="(item, index) in cityList" :key="index" :label="item.cityName" :value="index"></el-option>
                            </el-select>
                            <el-select  v-model="form.countryIndex" placeholder="请选择活动区域" class="province" @change="changeCountry">
                                <el-option v-for="(item, index) in countryList" :key="index" :label="item.countryName" :value="index"></el-option>
                            </el-select>
                        </el-form-item>
                        
                        <el-form-item label="学校名称：">
                            <el-input v-model="form.schoolName" placeholder="请输入30字以内学校名称全称"></el-input>
                        </el-form-item>
                        <el-form-item label="管理员姓名：">
                            <el-input v-model="form.admName" placeholder="请输入学校管理员姓名，如“张老师”"></el-input>
                        </el-form-item>
                        <el-form-item label="管理员手机：">
                            <el-input v-model="form.admPhone" placeholder="请输入管理员手机号，作为登录账号使用"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="submit">
                        <div>
                            <div class="btn" @click="check">确认创建</div>
                            <div>提示：开通后学校登录地址为：http://xxxx.cn</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog
        title="开通账号"
        :visible.sync="dialogVisible"
        width="30%">
            <p>是否确认开通 {{form.province.provinceName + form.city.cityName + form.country.countryName + ' ' + form.schoolName}}学校名称账号</p>
            <p>即将从钱包扣款 ￥{{balance.consume}}</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="openUp">确认开通</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
	import utils from '@/assets/js/urlConfig.js'
    export default {
        data() {
            return {
                form:{
                    schoolSize: 1,
                    type: ['选课', '分班', '排课', '考勤'],
                    schoolName: '',
                    admName: '',
                    admPhone: '',
                    provinceIndex: '',
                    cityIndex: '',
                    countryIndex: '',
                    province:{
                        provinceName: '',
                        provinceId: '',
                    },
                    city:{
                        cityName: '',
                        cityId: '',
                    },
                    country:{
                        countryName: '',
                        countryId: '',
                    },
                },
                provinceList: [],
                cityList: [],
                countryList: [],
                dialogVisible: false,
                balance: null,
            }
        },
        mounted() {
            this.getProvince();
            this.accountBalance();
        },
        methods: {
            // 获取省份
            getProvince() {
                var vm = this;
                this.$http({
                    method: 'GET',
                    url: utils.UrlConfig.listProvince,
                    params: {
                        token: $cookieStore.getAll('home_').tokenKey,
                    }
                }).then(function(res) {
                    if (res.data.code == 200) {
                        vm.provinceList = res.data.data;
                    } else {

                    }
                })
            },
            // 改变省份
            changeProvince() {
                console.log(this.form)
                var vm = this;
                vm.form.province = vm.provinceList[vm.form.provinceIndex];
                this.$http({
                    method: 'GET',
                    url: utils.UrlConfig.listCity,
                    params: {
                        token: $cookieStore.getAll('home_').tokenKey,
                        provinceId: vm.form.province.provinceId
                    }
                }).then(function(res) {
                    console.log(res)
                    if (res.data.code == 200) {
                        vm.cityList = res.data.data;
                    } else {

                    }
                })
            },
            // 改变失去
            changeCity() {
                var vm = this;
                vm.form.city = vm.cityList[vm.form.cityIndex];
                console.log(vm.form.city)
                this.$http({
                    method: 'GET',
                    url: utils.UrlConfig.listCountry,
                    params: {
                        token: $cookieStore.getAll('home_').tokenKey,
                        cityId: vm.form.city.cityId
                    }
                }).then(function(res) {
                    console.log(res)
                    if (res.data.code == 200) {
                        vm.countryList = res.data.data;
                    } else {

                    }
                })
            },
            // 改变地区
            changeCountry() {
                var vm = this;
                vm.form.country = vm.countryList[vm.form.countryIndex];
                console.log(vm.form.country)
            },
            // 信息检查
            check() {
                var vm = this;
                
                var RegExp = /(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}/;
                if (vm.form.schoolName.length > 30) {
                    vm.form.schoolName = vm.form.schoolName.slice(0, 30);
                    vm.$message.error("学校名称长度超过限制");
                    return false;
                } else if (vm.form.admName.length > 20) {
                    vm.form.admName = vm.form.admName.slice(0, 20);
                    vm.$message.error("管理员姓名长度超过限制");
                    return false;
                } else if (vm.form.cityId == "" || vm.form.countryId == "" || vm.form.provinceId == "") {
                    vm.$message.error("请完善地址信息");
                    return false;
                } else if(vm.form.admName == "" || vm.form.schoolName == "" || !vm.form.type.length || !vm.form.schoolSize){
                    vm.$message.error("请完善填写信息");
                    return false;
                }else if(RegExp.test(vm.form.admPhone) == false){
                    vm.$message.error("手机号码有误");
                    return false;
                }
                vm.dialogVisible = true
            },
            // 开通学校
            openUp() {
                var vm = this;
                var modules = [];
                for (var i = 0 ; i < vm.form.type.length ; i++) {
                    switch (true) {
                        case vm.form.type[i].indexOf('选课') != -1 : modules.push(1) ;break;
                        case vm.form.type[i].indexOf('分班') != -1 : modules.push(2) ;break;
                        case vm.form.type[i].indexOf('排课') != -1 : modules.push(3) ;break;
                        case vm.form.type[i].indexOf('考勤') != -1 : modules.push(4) ;break;
                    }
                }
                modules = modules.join('_');
                console.log( modules)
                // return;
                vm.$http({
                    method: 'POST',
                    url: utils.UrlConfig.openSchool + '?token=' + $cookieStore.getAll('home_').tokenKey,
                    data: {
                            "accountId": $cookieStore.getAll("home_").accountId,
                            "admName": vm.form.admName,
                            "admPhone": Number(vm.form.admPhone),
                            "modules": modules,
                            "schoolName": vm.form.schoolName,
                            "schoolSize": Number(vm.form.schoolSize),
                            "cityId": vm.form.city.cityId,
                            "cityName": vm.form.city.cityName,
                            "countryId": vm.form.country.countryId,
                            "countryName": vm.form.country.countryName,
                            "provinceId": vm.form.province.provinceId,
                            "provinceName":  vm.form.province.provinceName,
                    }
                }).then(function(res) {
                    if (res.data.code != 200) {
                        vm.$message.error(res.data.message);
                        return;
                    }
                    vm.$router.push({path:'/userManagement'});
                    vm.$message.success('开通成功');
                })
            },
            // 获取余额
            accountBalance() {
                var vm = this;
                vm.$http({
                    method: 'GET',
                    url: utils.UrlConfig.accountBalance,
                    params: {
                        token: $cookieStore.getAll('home_').tokenKey,
                        accountId: $cookieStore.getAll("home_").accountId,
                    }
                }).then(function(res) {
                    console.log(res)
                    if (res.data.code != 200) {
                        this.$message.error(res.data.msg);
                        return;
                    }
                    vm.balance = res.data.data;
                })
            },
        }
    }
</script>

<style scoped>
.content-title {
    height: 100px;
}

.content-cont {
    width: 553px;
    margin: 0 auto;
    padding-top: 32px;
}

.province {
    width: 30%;
}

.province:nth-of-type(2) {
    margin:0 15px;
}

.el-form-item {
    margin-bottom: 28px;
}

.submit>div {
    text-align: center;
}

.submit>div>div {
    display: inline-block;
}

.submit>div>div:nth-of-type(2) {
    color: #667988;
}

.btn {
    margin-right: 25px;
}

.el-dialog__body p {
    line-height: 32px;
}
</style>
